<template>
	<i-popup v-if="showPop" @confirm="propConfirm" @close="showPop = false" :confirmData="confirmData">
		<view class="prop_title">
			<view class="titles">
				确认作废工单吗？
			</view>
			<textarea v-model="remark" class="textarea" placeholder="请填写作废原因（必填）"></textarea>
		</view>
	</i-popup>
	<view class="workOrderDetail">
		<view class="pagetitle">
			<view class="title_status">{{pageData.orderStatus === 0 ? '已结算' : '已作废'}}</view>
			<text>下单时间：{{pageData.createTime}}</text>
			<text>制单人：{{pageData.createByName}}</text>
			<text v-if="pageData.orderStatus !== 0">作废原因：{{pageData.cancelReason}}</text>
		</view>
		<i-card top="20rpx">
			<view class="card_body">
				<view class="card_left">
					<view class="image">
						<image src="../../static/images/head2@2x.png"></image>
					</view>
					<view class="card_R">
						<view class="title_vno">
							<text class="vno">{{pageData.vno}}</text>
						</view>
						<view class="title_name">
							<text v-if="pageData.customerName"
								style="margin-right: 20rpx;">{{pageData.customerName}}</text>
							<text>{{pageData.phone}}</text>
						</view>
					</view>
				</view>
				<image @click="handleDown" :class="{down_icons: actvieDown}" class="down_icon"
					src="../../static/images/down_icon.png" mode=""></image>
			</view>
			<view class="downs" :class="{downsCheck: actvieDown}">
				<view class="downs_item">
					<text class="ti">里程（KM）</text>
					<text>{{pageData.mileage}}</text>
				</view>
				<view class="downs_item">
					<text class="ti">油表</text>
					<text>{{pageData.oil}}%</text>

				</view>
			</view>
		</i-card>
		<i-card top="20rpx">
			<view class="shop_list">
				<view class="shop_item" v-for="(item,index) in pageData.detailList" :key="index"
					:style="{borderBottom :index === pageData.detailList.length - 1 ? '' : '1rpx solid #f3f4f5'}">
					<view class="item_left">
						<view class="serviceName">
							<text class="names">{{item.serviceName}}</text>
							<text>x {{item.nums}}</text>
						</view>
						<view class="order_price">
							<i-price>{{item.price}}</i-price>
						</view>
					</view>
				</view>
			</view>
		</i-card>
		<i-card top="20rpx" v-if="pageData.sourceChannelName || pageData.builderUserName">
			<i-orderItem v-if="pageData.sourceChannelName" leftStyle="color: #16161F" title="渠道来源"
				:content="pageData.sourceChannelName"></i-orderItem>
			<i-orderItem v-if="pageData.builderUserName" leftStyle="color: #16161F" title="施工人员"
				:content="pageData.builderUserName"></i-orderItem>
		</i-card>
		<i-card top="20rpx">
			<view class="titles">工单信息</view>
			<i-orderItem title="工单编号" :border="false">
				<view class="copys" @click="copyStr(pageData.id)">
					<text>{{pageData.id}}</text>
					<image src="../../static/images/copy_icon.png" mode=""></image>
				</view>
			</i-orderItem>
			<i-orderItem :border="false" title="下单时间" :content="pageData.createTime"></i-orderItem>
			<i-orderItem :border="false" title="支付方式" content="系统外支付(仅记录)"></i-orderItem>
			<i-orderItem v-if="pageData.price" :border="false" title="实收金额">
				<i-price color='#FB652E'>{{pageData.price}}</i-price>
			</i-orderItem>
		</i-card>
		<i-card top="20rpx">
			<view class="tile_t">拍照留档</view>
			<view class="image_list">
				<image :src="item" mode="" v-for="(item, index) in pageData.archiveFileList" :key="index"></image>
			</view>
			<view class="tile_t">备注</view>
			<view class="remak">
				{{pageData.remark}}
			</view>
		</i-card>
		<i-card v-if="pageData.orderStatus === 0" top="20rpx">
			<text class="zf" @click="showPop = true">作废</text>
		</i-card>
		<view style="height: 48rpx;"></view>
	</view>
</template>

<script lang="ts" setup>
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import useStore from '../../stores/index'
	import { copyStr, showTost } from '../../utils/common';
	import { orderDetail, orderCancel } from '../../api/business';
import { specialReg } from '../../utils/regs';
	const pageData = ref<OrderDetailRes['data']>({})
	const id = ref('')
	const remark = ref('')
	const showPop = ref(false)
	const actvieDown = ref(false)
	const confirmData = {
		title: '确认',
		color: '#5C6D80',
	}

	onLoad((option) => {
		if (option.id) {
			id.value = option.id
			getPageData(option.id)
		}
	})
	const getPageData = async (id : string) => {
		const { data } = await orderDetail({ id })
		pageData.value = data
	}
	const handleDown = () => {
		actvieDown.value = !actvieDown.value
	}
	const propConfirm = async () => {
		if (!remark.value) {
			showTost('请填写作废原因')
			return
		}
		
		if (specialReg.test(remark.value)) {
			showTost('作废原因不能包含特殊字符')
			return
		}
		await orderCancel({
			id: id.value,
			remark: remark.value
		})
		showTost('作废成功！', () => {
			getPageData(id.value)
		})
		showPop.value = false
	}
</script>

<style lang="scss" scoped>
	.workOrderDetail {
		width: 100%;
		min-height: 100vh;
		background-color: #f3f4f5;

		.pagetitle {
			width: calc(100% - 64rpx);
			margin: 0 auto;
			@include flexC;

			.title_status {
				@include titlefont(48rpx);
				margin-bottom: 16rpx;
			}

			text {
				@include dfont(26rpx);
				color: #A0A0AD;
				margin-bottom: 8rpx;
			}
		}

		.card_body {
			@include flexRS;

			.down_icon {
				width: 48rpx;
				height: 48rpx;
				transition: all 0.3s ease-out;
			}

			.down_icons {
				transform: rotate(180deg)
			}

			.card_left {
				@include flexR;
			}

			.image {
				width: 64rpx;
				height: 64rpx;
				margin-right: 24rpx;

				image {
					width: 64rpx;
					height: 64rpx;
				}
			}

			.card_R {
				@include flexC;
				width: 80%;

				.title_vno {
					@include dfont(28rpx);
					@include flexRS;
					margin-bottom: 8rpx;

					.vno {
						@include titlefont(28rpx);
					}
				}

				.title_name {
					@include dfont(26rpx);
					@include flexR;
					margin-bottom: 8rpx;
					color: #5C6D80;
				}
			}
		}

		.downs {
			margin-top: 12rpx;
			@include flexC;
			overflow: hidden;
			width: 100%;
			height: 0;
			transition: all 0.3s ease-out;

			.downs_item {
				@include flexRS;
				@include dfont(26rpx);
				color: #16161F;
				margin-top: 24rpx;

				.ti {
					color: #A0A0AD;
				}
			}
		}

		.downsCheck {
			height: 120rpx;
		}

		.shop_list {
			.shop_item {
				@include flexRS;
				padding: 24rpx 0;

				.item_left {
					@include flexC;
					width: 100%;

					.serviceName {
						@include flexRS;
						@include dfont(28rpx);
						margin-bottom: 8rpx;

						.names {
							width: 90%;
							@include overflow;
							@include titlefont(28rpx);
						}
					}
				}

				.order_price {
					@include flexR;
				}
			}
		}
	}

	.titles {
		@include titlefont(28rpx);
	}

	.copys {
		@include flexR;
		justify-content: flex-end;
		align-items: flex-end;
		width: 70%;

		text {
			@include warp;
			text-align: right;
		}

		image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 8rpx;
		}
	}

	.tile_t {
		@include dfont(26rpx);
		color: #A0A0AD;
		flex-wrap: wrap;
		margin-bottom: 24rpx;
	}

	.image_list {
		@include flexR;
		padding-bottom: 40rpx;
		border-bottom: 1rpx solid #f3f4f5;
		margin-bottom: 40rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
		}
	}

	.remak {
		@include dfont(26rpx);
	}

	.zf {
		@include dfont;
		color: #FF453A;
	}

	.prop_title {
		@include flexCC;
		padding: 48rpx 0;

		.titles {
			@include titlefont(32rpx);
			margin-bottom: 48rpx;
		}

		.textarea {
			width: 88%;
			background-color: $background-color;
			padding: 24rpx;
			height: 120rpx;
			border-radius: 8rpx
		}
	}
</style>